<template>
  <div>
    <div class="button-box">
      <div class="title-box"><span class="border" /><span>我的业务域属性</span></div>
    </div>
    <div class="tab-pd20">
      <checkFilter
        v-if="defualtChoice.length"
        title="业务域"
        :filter-data="domainData"
        :defualt-choice="defualtChoice"
        single
        property="domainId"
        @changeFilter="changeDomainFilter"
      />
    </div>

    <el-tabs v-model="domainAttrTab">
      <el-tab-pane label="我的组织" name="org">
        <my-org ref="refOrg" :user-id="userId" :domain-id="activeDomainId" />
      </el-tab-pane>
      <el-tab-pane label="我的角色" name="role">
        <my-role ref="refRole" :user-id="userId" :domain-id="activeDomainId" />
      </el-tab-pane>
      <el-tab-pane label="我的用户组" name="userGroup">
        <my-user-group ref="refGroup" :user-id="userId" :domain-id="activeDomainId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import checkFilter from '@/components/checkFilter'
import MyOrg from './component/AuthOrg'
import MyRole from './component/AuthRole'
import MyUserGroup from './component/AuthUserGroup'
import { queryDomainList } from '@/api/domain'
export default {
  name: 'MyDomainTab',
  components: { MyOrg, MyRole, MyUserGroup, checkFilter },
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      domainData: [], // 所有业务域
      activeDomainId: '', // 当前业务域
      domainAttrTab: 'org' // 业务域通用属性当前tab值
    }
  },
  computed: {
    defualtChoice() {
      const _arr = []
      if (this.activeDomainId) {
        _arr.push(this.activeDomainId)
      }
      return _arr
    }
  },

  watch: {
    activeDomainId(val, oldVal) {
      if (val) {
        this.refreshDomainTable()
      }
    },
    domainAttrTab(val, oldVal) {
      this.refreshDomainTable()
    }
  },
  created() {
    this.initDomainData()
  },

  methods: {
    initDomainData() {
      queryDomainList().then(res => {
        if (res.data && res.data.length) {
          this.domainData = res.data.map(v => {
            return { value: v.domainId, label: v.domainName }
          })
        }
        this.activeDomainId = this.domainData.length ? this.domainData[0].value : '' // 初始化时默认选中第一个业务域
      })
    },
    changeDomainFilter(domainId) {
      this.activeDomainId = domainId
    },
    refreshDomainTable(flag) {
      switch (this.domainAttrTab) {
        case 'org':
          this.$refs.refOrg && this.$refs.refOrg.refreshTable()
          break
        case 'role':
          this.$refs.refRole && this.$refs.refRole.refreshTable()
          break
        case 'userGroup':
          this.$refs.refGroup && this.$refs.refGroup.refreshTable()
          break
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.tab-pd20{
  padding:0 20px;
  margin-bottom: 10px;
}
/deep/.el-tabs__header{
  padding:0 20px;
}

</style>
